<template>
  <div class="app-container">
    <el-card>
      <el-input
        v-model="searchName"
        placeholder="竞赛标题 | 内容"
        style="width: 9rem;"
        @keyup.enter.native="contestListAdmin"
        @input="contestListAdmin"
      />
      <el-button
        class="filter-item"
        style="margin-left: 1rem"
        type="primary"
        icon="el-icon-search"
        @click="contestListAdmin"
      >搜索
      </el-button>
    </el-card>
    <el-card style="margin-top: 1rem;">
      <el-table
        :data="tableData"
        stripe
        :default-sort="{prop: 'contestId', order: 'descending'}"
        @sort-change="headerClick"
      >
        <el-table-column prop="contestId" label="编号" sortable width="80px" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="startTime" label="开始时间" sortable />
        <el-table-column prop="endTime" label="结束时间" sortable />
        <el-table-column prop="privilege" label="权限">
          <template slot-scope="scope">
            <span :style="{color:scope.row.privilege===0?'#1abc9c':'#3742fa'}">
              {{ scope.row.privilege === 0 ? 'Public' : 'Private' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="defunct" label="状态">
          <template slot-scope="scope">
            <el-link :type="scope.row.defunct==='N'?'success':'danger'" @click="updateContestDefunct(scope.row)">
              {{ scope.row.defunct === 'N' ? 'Available' : 'Reserved' }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link icon="el-icon-edit" type="primary" @click="editContest(scope.row.contestId)">修改</el-link>
            <el-link
              icon="el-icon-delete"
              style="margin-left: 0.5rem"
              type="danger"
              @click="deleteContest(scope.row.contestId)"
            >删除
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="消息管理">
          <template slot-scope="scope">
            <el-link icon="el-icon-setting" type="primary" @click="editMail(scope.row.contestId)">消息管理</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px;"
        background
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { contestListAdmin, deleteContest, updateContestDefunct } from '@/api/contest'

export default {
  data() {
    return {
      searchName: '',
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      tableData: [],
      sort: 2
    }
  },
  mounted() {
    this.contestListAdmin()
  },
  methods: {
    contestListAdmin() {
      contestListAdmin({
        current: this.currentPage,
        size: this.pageSize,
        sort: this.sort,
        name: this.searchName
      }).then(res => {
        this.totalNum = parseInt(res.data.total)
        this.tableData = res.data.records
      })
    },
    editContest(contestId) {
      this.$router.push({
        path: '/admin/contest/add',
        query: { contestId: contestId }
      })
    },
    editMail(contestId) {
      this.$router.push({
        path: '/admin/contest/question',
        query: { contestId: contestId }
      })
    },
    deleteContest(contestId) {
      this.$confirm('此操作将永久删除竞赛数据，可能会导致其他出数据异常，建议使用修改功能，是否继续删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteContest({ contestId: contestId }).then((res) => {
          if (res.data) {
            this.$message.success(res.message)
            this.contestListAdmin()
          }
        })
      })
    },
    updateContestDefunct(row) {
      updateContestDefunct({ contestId: row.contestId, defunct: row.defunct }).then(res => {
        if (res.data) {
          row.defunct = row.defunct === 'N' ? 'Y' : 'N'
          this.$message.success(res.message)
        }
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.contestListAdmin()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.contestListAdmin()
    },
    headerClick(event) {
      const params = [['contestId', 1], ['startTime', 3], ['endTime', 5]]
      const sortMap = new Map(params)
      if (event.order === null) {
        this.sort = 0
        this.contestListAdmin()
        return
      }
      if (event.order === 'descending') {
        sortMap.set(event.prop, sortMap.get(event.prop) + 1)
      }
      this.sort = sortMap.get(event.prop)
      this.contestListAdmin()
    }
  }
}
</script>

<style scoped>

</style>
